<template>
  <el-dialog title="编 辑" :visible.sync="thisUpdatePage" :before-close="handleClose">
    <el-form ref="supplierFrom" :model="supplierFrom" label-width="135px" :rules="rules">
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input v-model="supplierFrom.supplierName" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="供应商编码" prop="supplierCode">
        <el-input v-model="supplierFrom.supplierCode" readonly="readonly" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="供应商详细地址" prop="supplierAddress">
        <el-input v-model="supplierFrom.supplierAddress" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="社会信用代码" prop="socialCreditCode">
        <el-input v-model="supplierFrom.socialCreditCode" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="personInCharge">
        <el-input v-model="supplierFrom.personInCharge" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="邮政编码" prop="zipCode">
        <el-input v-model="supplierFrom.zipCode" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="开户银行" prop="bankName">
        <el-input v-model="supplierFrom.bankName" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="银行卡号" prop="bankNo">
        <el-input v-model="supplierFrom.bankNo" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="supplierFrom.phone" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="微信账户" prop="accountWx">
        <el-input v-model="supplierFrom.accountWx" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="微信账户名字" prop="accountWxName">
        <el-input v-model="supplierFrom.accountWxName" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="支付宝账户" prop="accountZfb">
        <el-input v-model="supplierFrom.accountZfb" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="支付宝账户名字" prop="accountZfbName">
        <el-input v-model="supplierFrom.accountZfbName" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
          <el-select v-model="supplierFrom.status" disabled style="width:80%">
            <el-option value="0" label="暂停合作">暂停合作</el-option>
            <el-option value="1" label="正常合作">正常合作</el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="供应商等级" prop="supplierLevel">
          <el-select v-model="supplierFrom.supplierLevel" style="width:80%">
            <el-option value="0" label="其它">其它</el-option>
            <el-option value="1" label="省级">省级</el-option>
            <el-option value="2" label="市级">市级</el-option>
            <el-option value="3" label="特约">特约</el-option>
            <el-option value="4" label="独家">独家</el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="结款账期（天）" prop="collectionPeriod">
        <el-input v-model.number="supplierFrom.collectionPeriod" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item label="备注信息" prop="remark">
        <el-input type="textarea" rows="5" v-model="supplierFrom.remark" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('supplierFrom')">保存</el-button>
        <el-button @click="closeUpdateChange">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { findSupplierById, editSaveSupplier } from "@api/supplier/supplier";
export default {
  data() {
    return {
      thisUpdatePage: this.updatePage,
      updateId: this.uId,
      supplierFrom: {
        supplierCode:"",
        supplierName: "",
        parentSupplierId: 0,
        supplierAddress: "",
        socialCreditCode: "",
        personInCharge: "",
        zipCode: "",
        phone: "",
        bankName: "",
        bankNo: "",
        accountWx: "",
        accountWxName: "",
        accountZfb: "",
        accountZfbName: "",
        supplierLevel:"0",
        collectionPeriod:"",
        remark:""
      },
      rules: {
        supplierName: [
          { required: true, message: "供应商名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 64,
            message: "长度在 1 到 64 个字",
            trigger: "blur",
          },
        ],
        supplierCode: [
          { required: true, message: "供应商编码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 64,
            message: "长度在 1 到 64 个字",
            trigger: "blur",
          },
        ],
        socialCreditCode: [
          { required: true, message: "社会信用代码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 32,
            message: "长度在 1 到 32 个字符",
            trigger: "blur",
          },
        ],
        supplierAddress: [
          { required: true, message: "供应商详细地址不能为空", trigger: "blur" },
          {
            min: 1,
            max: 64,
            message: "长度在 1 到 64 个字",
            trigger: "blur",
          },
        ],
        zipCode: [
          { required: true, message: "邮政编码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "长度在 1 到 6 个字符",
            trigger: "blur",
          },
        ],
        personInCharge: [
          { required: true, message: "负责人不能为空", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        bankNo: [
          { required: true, message: "银行卡号不能为空", trigger: "blur" },
          {
            min: 1,
            max: 32,
            message: "长度在 1 到 32 个字符",
            trigger: "blur",
          },
        ],
        bankName: [
          { required: true, message: "开户银行不能为空", trigger: "blur" },
          {
            min: 1,
            max: 32,
            message: "长度在 1 到 32 个字",
            trigger: "blur",
          },
        ],
        accountWx: [
          { required: true, message: "微信账户不能为空", trigger: "blur" },
          {
            min: 1,
            max: 32,
            message: "长度在 1 到 32 个字符",
            trigger: "blur",
          },
        ],
        accountWxName: [
          { required: true, message: "微信账户对应的名字不能为空", trigger: "blur" },
          {
            min: 1,
            max: 32,
            message: "长度在 1 到 32 个字",
            trigger: "blur",
          },
        ],
        accountZfb: [
          { required: true, message: "支付宝账户不能为空", trigger: "blur" },
          {
            min: 1,
            max: 32,
            message: "长度在 1 到 32 个字符",
            trigger: "blur",
          },
        ],
        accountZfbName: [
          { required: true, message: "支付宝账户对应的名字不能为空", trigger: "blur" },
          {
            min: 1,
            max: 32,
            message: "长度在 1 到 32 个字",
            trigger: "blur",
          },
        ],
        supplierLevel: [
          { required: true, message: "供应商等级不能为空", trigger: "blur" },
        ],
        collectionPeriod: [
          { required: true, message: "借款账期不能为空", trigger: "blur" },
          { type: 'number', message: '借款账必须为数字值', trigger: "blur" },
        ],
      },
    };
  },
  /**双向绑定 start */
  props: ["updatePage", "uId"],
  watch: {
    updatePage(val) {
      this.thisUpdatePage = val; //②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
    },
    thisUpdatePage(val) {
      this.$emit("on-updatePage-change", val); //③组件内对myResult变更后向外部发送事件通知
    },
    uId(val) {
      this.updateId = val; //②监听外部对props属性uShow的变更，并同步到组件内的data属性udpateShow中
      this.loadSupplier(val);
    },
    updateId(val) {
      this.$emit("on-id-change", val); //③组件内对udpateShow变更后向外部发送事件通知
    },
  },
  /**双向绑定 end */
  methods: {
    closeUpdateChange() {
      this.thisUpdatePage = !this.thisUpdatePage;
      this.$refs["supplierFrom"].resetFields();
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          editSaveSupplier(this.supplierFrom)
            .then((res) => {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.$emit("on-loadlist-change"); //③组件内对myResult变更后向外部发送事件通知
              this.loading = false;
              this.closeUpdateChange();
            })
            .catch((err) => {
              console.log("err", err);
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose(done) {
      this.$confirm("确定关闭吗？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    loadSupplier(id) {
      if(id==-1){
        return;
      }
      this.loading = true;
      findSupplierById({
        supplierId: id,
      })
        .then((res) => {
          this.supplierFrom = res.data;
          this.supplierFrom.status = res.data.status+'';
          this.supplierFrom.supplierLevel = res.data.supplierLevel+'';
          this.loading = false;
        })
        .catch((err) => {
          console.log("err", err);
          this.loading = false;
        });
    },
  },
  created() {},
  mounted() {
  },
  computed: {},
};
</script>